<template>
  <div class="user">
    <!-- 内容区域 start-->
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="5">
          <!-- <el-input placeholder="请输入内容" size="mini" clearable @clear="getUserList"> -->
          <!--  v-model="queryInfo.query" -->
          <!-- <el-button slot="append" icon="el-icon-search" size="mini" @click="getUserList"></el-button>
          </el-input>-->
        </el-col>
        <el-col :span="4">
          <el-button type="primary" size="mini" @click="dialog = true">添加角色</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">
          <!-- 树形菜单 start -->
          <div class="admin-tree">
            <el-tree
              :data="menuList"
              show-checkbox
              :default-expand-all="true"
              node-key="id"
              ref="tree"
              highlight-current
              :props="menuProps"
            ></el-tree>
          </div>
          <!-- 树形菜单 end -->
        </el-col>
        <el-col :span="19">
          <!-- 角色列表区域 start-->
          <elmTable
            :tableData="rolesList"
            :tableInfo="tableInfo"
            @changeRoleState="changeRoleState"
          >
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="showEditRoleDialog(scope.row)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="deleteRoleDialog(scope.row)"
              ></el-button>
              <el-tooltip
                class="item"
                effect="dark"
                content="分配权限"
                placement="top-start"
                :enterable="false"
              >
                <el-button type="warning" icon="el-icon-s-tools" size="mini"></el-button>
              </el-tooltip>
            </template>
          </elmTable>
        </el-col>
      </el-row>

      <!-- 分页 -->
      <!-- <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>-->
      <!-- 抽屉功能 start-->
      <el-drawer
        title="新增角色"
        :before-close="handleClose"
        :visible.sync="dialog"
        :with-header="false"
        custom-class="demo-drawer"
        ref="drawer"
      >
        <div class="drawer_content">
          <h3>新增角色信息</h3>
          <el-form
            :inline="true"
            label-width="auto"
            :model="setRoleform"
            ref="setRoleform"
            size="mini"
          >
            <el-form-item label="角色名称" prop="role_name">
              <el-input v-model="setRoleform.role_name"></el-input>
            </el-form-item>
            <el-form-item label="角色状态" prop="role_status">
              <el-input :disabled="true" v-model="setRoleform.role_status"></el-input>
            </el-form-item>
            <el-form-item label="角色简述" prop="role_sketch">
              <el-input type="textarea" v-model="setRoleform.role_sketch"></el-input>
            </el-form-item>
          </el-form>
          <div class="drawer_footer">
            <el-button @click="cancelForm" size="mini">取 消</el-button>
            <el-button
              type="primary"
              size="mini"
              @click="setRole"
              :loading="loading"
            >{{ loading ? "提交中 ..." : "确 定" }}</el-button>
          </div>
        </div>
      </el-drawer>
      <!-- 抽屉功能 end-->
    </el-card>

    <!-- 编辑角色 start-->
    <EditRoleDialog :editRoleFormCom="editRoleFormCom" @confirmEditRole="confirmEditRole"></EditRoleDialog>
    <!-- 编辑角色 end -->
  </div>
</template>

<script>
import utils from '../../plugins/utils'
import { mapGetters } from 'vuex'

export default {
  components: {
    EditRoleDialog: () => import('@/components/Dialogs/EditRole.vue'),
  },
  props: {},
  data() {
    return {
      //树形菜单
      menuProps: {
        children: 'children',
        label: 'menu_name',
      },
      tableInfo: {
        selection: false, //表格是否有选择功能
        operation: true, //表格是否有操作功能
        tableKey: [
          { label: '角色名称', prop: 'role_name' },
          { label: '角色简述', prop: 'role_sketch' },
          {
            label: '角色状态',
            prop: 'role_status',
            switch: true,
            activeColor: '#13ce66', //状态开关颜色
          },
        ],
      },
      // queryInfo: {
      //   //角色数据列表请求参数
      //   query: '', //查询参数
      //   pagenum: 1, //当前页码
      //   pagesize: 4 //每页显示条数
      // },
      // total: 0, //列表数据总条数
      dialog: false, //控制抽屉的隐藏和显示
      loading: false,
      //新增角色信息表单
      setRoleform: {
        role_name: '',
        role_sketch: '',
        role_status: 1,
      },
      editRoleFormCom: {
        editRoleForm: {}, //编辑角色表单
        editRoleDialogVisible: false, //编辑角色弹框默认状态
      },
    }
  },
  created() {
    this.getRolesList()
  },
  computed: {
    ...mapGetters(['menuList', 'rolesList']),
  },
  methods: {
    //新增角色信息
    async setRole() {
      const { role_name, role_sketch, role_status } = this.setRoleform
      const { data: res } = await this.$api.role.setRole(this.setRoleform)
      if (res.meta.status !== 200) {
        this.$message.error({
          message: res.meta.message,
        }) //当前角色设置保存失败
      } else {
        this.$refs.setRoleform.resetFields() //重置表单内容
        this.$message.success({
          message: res.meta.message,
        }) //当前角色设置保存成功
        this.$store.dispatch('getrolesList')
      }
    },

    //获取角色列表请求
    async getRolesList() {
      if (!utils.local.get('rolesList')) {
        const { data: res } = await this.$api.role.rolesList()
        if (res.meta.status !== 200) {
          this.$message.error({
            message: res.meta.message,
          })
        } else {
          this.$store.commit('rolesList', res.data)
          // this.total = res.data.total
        }
      }
    },

    //修改角色状态
    async changeRoleState(roleState) {
      const { data: res } = await this.$api.role.roleState({
        _id: roleState._id, //角色ID
        role_name: roleState.role_name, //角色名称
        role_status: roleState.role_status, //角色状态
      })
      if (res.meta.status !== 200) {
        roleState.role_status = !roleState.role_status
        this.$message.error({
          message: res.meta.message,
        }) //当前角色设置保存失败
      } else {
        this.$message.success({
          message: res.meta.message,
        }) //当前角色状态修改成功
        this.$store.dispatch('getrolesList')
      }
    },

    //编辑角色对话框点击显示事件
    showEditRoleDialog(role) {
      console.log('role', role)
      const data = {
        _id: role._id,
        role_name: role.role_name,
        role_sketch: role.role_sketch,
      }
      this.editRoleFormCom.editRoleForm = data //父组件传值子组件
      this.editRoleFormCom.editRoleDialogVisible = true
    },

    //编辑角色对话框的提交事件
    async confirmEditRole(data) {
      const { data: res } = await this.$api.role.putEditRole(data)
      if (res.meta.status !== 200) {
        return this.$message.error({
          message: res.meta.message,
        })
      } else {
        this.$message.success({
          message: res.meta.message,
        })
        this.$store.dispatch('getrolesList')
      }
    },

    //删除选中角色
    async deleteRoleDialog(del) {
      await this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          const { data: res } = await this.$api.role.deleteRole({
            _id: del._id,
          })
          if (res.meta.status !== 200) {
            return this.$message.error({
              message: res.meta.message,
            })
          } else {
            this.$message.success({
              message: res.meta.message,
            })
            this.$store.dispatch('getrolesList')
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消角色删除',
          })
        })
    },

    //抽屉功能
    handleClose(done) {
      this.loading = false
      this.dialog = false
    },

    cancelForm() {
      this.loading = false
      this.dialog = false
    },

    //页码大小
    // handleSizeChange(newSize) {
    //   this.queryInfo.pagesize = newSize
    //   this.getUserList()
    // },

    //当前页变动
    // handleCurrentChange(newPage) {
    //   this.queryInfo.pagenum = newPage
    //   this.getUserList()
    // },
  },
}
</script>

<style lang="sass" scoped>
.admin-tree
  border: 1px solid #ebeef5
  margin-top: 18px

.el-form
  width: 500px

.drawer_content
  padding-left: 15px
  .el-form
    padding: 15px
    .el-input,.el-select
      width: 150px

.el-drawer
  outline: none
  height: 100%

.demo-drawer__footer
  margin-left: 20px
</style>
